//let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const defaultsDeep = require('lodash.defaultsdeep');
var path = require('path');
var webpack = require('webpack');
// Plugins
var CopyWebpackPlugin = require('copy-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
// PostCss
var autoprefixer = require('autoprefixer');
var postcssVars = require('postcss-simple-vars');
var postcssImport = require('postcss-import');
const base = {
    mode: process.env.NODE_ENV === 'production'? 'production':'development',
    devtool: 'cheap-module-source-map',
    devServer: {
        contentBase: path.resolve(__dirname, 'build'),
        inline: true,        
        host: '0.0.0.0', port: 8601,
    },
    output: {
        library: 'GUI',
        filename: '[name].js',
        chunkFilename: 'chunks/[name].js'
    },
    externals: { React: 'react', ReactDOM: 'react-dom' },
    resolve: { symlinks: false },
    module: {
        rules: [{
            test: /\.jsx?$/,
            loader: 'babel-loader',
            include: [
                path.resolve(__dirname, 'src'),
                /node_modules[\\/]scratch-[^\\/]+[\\/]src/,
                /node_modules[\\/]pify/,
                /node_modules[\\/]@vernier[\\/]godirect/
            ],
            options: {
                // Explicitly disable babelrc so we don't catch various config
                // in much lower dependencies.
                babelrc: false,
                plugins: [
                    '@babel/plugin-syntax-dynamic-import',
                    '@babel/plugin-transform-async-to-generator',
                    '@babel/plugin-proposal-object-rest-spread',
                    ['react-intl', {
                        messagesDir: './translations/messages/'
                    }],
                    ['import', {
                        libraryName: 'antd',
                        libraryDirectory: "es",
                        style: 'css' // `style: true` 会加载 less 文件
                    }]
                ],
                presets: ['@babel/preset-env', '@babel/preset-react']
            }
        },
        {
            test: /\.css$/,
            exclude: [/[\\/]node_modules[\\/].*antd/], // 排除antd
            use: [
            {loader: 'style-loader'}, 
            {loader: 'css-loader',
                options: {
                    modules: true,
                    importLoaders: 1,
                    localIdentName: '[name]_[local]_[hash:base64:5]',
                    camelCase: true
                }
            },
            {loader: 'postcss-loader',
                options: {
                    ident: 'postcss',
                    plugins: function () {
                        return [
                            postcssImport,
                            postcssVars,
                            autoprefixer
                        ];
                    }
                }
            }]
        },
        { // 因为antd 基于 es module自身 css 是全局的，为了避免污染全局 css，这里单独配置
            test: /\.css$/,
            include: [/[\\/]node_modules[\\/].*antd/],
            use: [{
                loader: 'style-loader'
            }, {
                loader: 'css-loader',
                options: {
                    importLoaders: 1,
                    camelCase: true
                }
            }]
        }
    ]
    },
    optimization: {minimizer: [new UglifyJsPlugin({include: /\.min\.js$/})]},
    plugins: []
};
const STATIC_PATH = process.env.STATIC_PATH || '/static';
module.exports = [
    defaultsDeep({}, base, {
        entry: {
            'scratch.min': ['react', 'react-dom', './src/playground/index.jsx']
        },
        output: {
            path: path.resolve('build'),
            filename: '[name].js'
        },
        module: {
            rules: base.module.rules.concat([
                {
                    test: /\.(svg|png|wav|gif|jpg)$/,
                    loader: 'file-loader',
                    options: {
                        outputPath: 'static/assets/'
                    }
                }
            ])
        },
        optimization: {
            splitChunks: {
                chunks: 'all',
                name: 'scratch.min'
            },
            runtimeChunk: {
                name: 'scratch.min'
            }
        },
        plugins: base.plugins.concat([

            new webpack.DefinePlugin({
                'process.env.NODE_ENV': '"' + process.env.NODE_ENV + '"',
                'process.env.DEBUG': Boolean(process.env.DEBUG),
                'process.env.GA_ID': '"' + (process.env.GA_ID || 'UA-000000-01') + '"'
            }),
            new HtmlWebpackPlugin({
                chunks: ['scratch.min', 'gui'],
                template: 'src/playground/index.ejs',
                title: 'Scratch 3.0 GUI',
                sentryConfig: process.env.SENTRY_CONFIG ? '"' + process.env.SENTRY_CONFIG + '"' : null
            }),
            new CopyWebpackPlugin([{
                from: 'static',
                to: 'static'
            }]),
            new CopyWebpackPlugin([{
                from: 'node_modules/scratch-blocks/media',
                to: 'static/blocks-media'
            }]),
            new CopyWebpackPlugin([{
                from: 'docs/img',
                to: 'img'
            }]),
            new CopyWebpackPlugin([{
                from: 'docs/user',
                to: 'user'
            }]),
        ])
    })
]
